/**
 * 获取接口
 * 动态渲染数组分类导航
 */


function getProductNav(){
        axios({
            method:'get',
            url:'http://api.yuguoxy.com/api/shop/category/list'
        }).then(response=>{
        let {resultCode,resultInfo}=response.data
          if (resultCode==1){
              let list=resultInfo.list
              showProductNav(list)
          }
        })
}
/**
 * 动态渲染数组分类导航
 */
const ulList=document.querySelector('.product .productNav ul')
console.log(ulList);
function showProductNav(list) {
         let str = list.map(item=>{
             return `
             <li data-index="${item.id}" >${item.name}</li> 
             `
         }).join('')
         ulList.innerHTML=str
         let  liEle=document.querySelectorAll('.product .productNav ul li')
         lookProduct(liEle)
       
}
function lookProduct(liEle) {
        for (let i = 0; i < liEle.length; i++) {
          liEle[i].addEventListener('click',function(){
            for (let i = 0; i < this.parentElement.children.length; i++) {
              this.parentElement.children[i].classList.remove('active')
            }
            this.classList.add('active')
            let id=this.getAttribute('data-index')
            axios({
              method:'get',
              url:'http://api.yuguoxy.com/api/shop/list/category',
              params:{
                 categoryId:id,
              }
          }).then(response=>{
             let {resultCode,resultInfo}=response.data
           if (resultCode==1){
               let list=resultInfo.list
               showProductList(list)
           }
          })
          })
        }
}
function showProductList(list) {
           let str =list.map(item=>{
               return `
               <li onclick="productdetail(${item.id})">
               <img src="${item.picture}" alt="productimg">
               <p class="cart-introduce">${item.product}</p>
               <p class="cart-source"><span class="source">淘宝</span> <span>包邮</span> </p>
               
               <div class="cart">
                 <p class="cart-price">
                   <span>￥</span>
                   <span class="price">${parseInt(item.price)}</span> 
                   <span class="price-decimal">${((item.price).toString()).substring((item.price).toString().indexOf('.',1))}</span>
                    <span>${item.oldprice}人已买</span>
                    <span class="vol">3元卷</span>
                 </p>
               </div>     
             </li>
                   `
           }).join('')
           const  productListul=document.querySelector('.productlist ul')
           productListul.innerHTML=str
        }
        function productdetail(id){
          location.href = '../pages/detail.html?id='+id
      }   
getProductNav()